<template>
    <div class="hello">
        <div class="textcontant">
            imagelist --- --- 
            <div class="tittle">
                <div>
                    <ul>
                        <li v-for="item in textlist.tittle" @click="changetab(item.key)" :class="['tab',selecttab==item.key?'checkedtab':'']">
                            {{item.name}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="contain">
                <!-- <div class="leftbtn">leftbtn</div>
                <div class="range">
                    <div class="list" v-for="item in textlist.xinwen" @click="godetail(item.id)">
                        <div class="imglist" @mouseenter="seenter" @mouseleave="leaver">
                            <img :src="item.imgurl" alt="">
                            <div v-show="showimgtittle" class="imgtit">
                                {{item.tit}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightbtn">rightbtn</div> -->


                        <!-- :autoplay="setting.autoplay"
        :autoplay-speed="setting.autoplaySpeed"
        :dots="setting.dots"
        :trigger="setting.trigger"
        :arrow="setting.arrow" -->
    <Carousel
        dots="outside"
        arrow="always"
    >
        <Carousel-item>
            <div class="demo-carousel">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
            </div>
        </Carousel-item>
        <Carousel-item>
            <div class="demo-carousel">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
            </div>
        </Carousel-item>
        <Carousel-item>
                        <div class="demo-carousel">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
            </div>
        </Carousel-item>
        <Carousel-item>
                        <div class="demo-carousel">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
                <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg" alt="">
            </div>
        </Carousel-item>
    </Carousel>
            </div>
        </div>
    </div>
</template>

<script>
// http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg
export default {
    components: {

    },
    mounted(){

    },
    data () {
        return {
            showimgtittle: "true" ,
            textlist:{
                tittle:[
                    {
                        name:"新闻",
                        key:"first",
                    },
                    {
                        name:"娱乐",
                        key:"second"
                    }
                    ],
                xinwen:[
                {
                    id:"0000001",
                    tit:"第一篇文章",
                    imgurl:"http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg"
                },{
                    id:"0000002",
                    tit:"第二篇文章",
                    imgurl:"http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg"
                },{
                    id:"0000003",
                    tit:"第一篇文章",
                    author:"作者编号222",
                    imgurl:"http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg"
                },{
                    id:"0000003",
                    tit:"第一篇文章",
                    author:"作者编号222",
                    imgurl:"http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg"
                },{
                    id:"0000003",
                    tit:"第一篇文章",
                    author:"作者编号222",
                    imgurl:"http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg"
                },{
                    id:"0000003",
                    tit:"第一篇文章",
                    author:"作者编号222",
                    imgurl:"http://n.sinaimg.cn/default/1_img/upload/3933d981/327/w640h487/20180722/uXxw-fzrwiaz9249506.jpg"
                }
            ]}
        }
    },
    methods: {
        seenter(){
            console.log("seenter")
        },
        leaver(){
            console.log("leave");
        },
        selecttab(key){
            console.log(key)
        },
        changetab(){
            console.log("123")
        }
    },
    directives:{
        
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
    margin: 10px;
}
.contain .list{
    float: left;
    margin: 10px;
}
.contain{
    overflow: hidden;
}
.contain .range{
    overflow: hidden;
    width: 700px;
    float: left;
    height: 235px;
}
.contain .rightbtn,.leftbtn{
    float: left;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 50%;
    background: palegreen;
    line-height: 50px;
    margin-top: 70px;
    cursor: pointer;
}
.contain .list .imglist>img{
    width: 200px;
    height: 200px;
}
.contain .list .imglist .imgtit{
    position: relative;
    bottom: 36px;
    left: 0px;
    background: gray;
    height: 30px;
    line-height: 30px;
    opacity: 0.9;
    color: #eee;
}




.demo-carousel img{
    width:200px;
    height:200px;
}
.contain .ivu-carousel{
    padding-left:70px;
    padding-right:70px;
}
</style>
